<template>
  <div class="container">
    <el-card>
      <div slot="header" class="clearfix">
        <span>{{$route.query.id?'试题修改':'试题录入'}}</span>
      </div>
      <el-form ref="form" :rules="rules" :model="form" label-width="100px">
        <el-form-item label="学科:" prop="subjectID">
          <el-select
            @change="getMenuList()"
            v-model="form.subjectID"
            placeholder="请选择"
            class="select"
          >
            <el-option
              v-for="(item, id) in subject"
              :key="id"
              :label="item.subjectName"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="目录:" prop="catalogID">
          <el-select v-model="form.catalogID" placeholder="请选择" class="select" @change="getTagsList">
            <el-option
              v-for="(item, index) in mulu"
              :key="index"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="企业:" prop="enterpriseID">
          <el-select
            v-model="form.enterpriseID"
            placeholder="请选择"
            class="select"
          >
            <el-option
              v-for="(item, id) in qiye"
              :key="id"
              :label="item.company"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="城市:" prop="province">
          <el-select

            @change="handleProvince"
            v-model="form.province"
            class="citywd"
            placeholder="请选择"
          >
            <el-option
              v-for="(item,index) in provinces"
              :key="index"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>

          <el-select
            v-model="form.city"
            class="citywd"
            placeholder="请选择"
          >
            <el-option
              v-for="(item, index) in citys"
              :key="index"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="方向:" prop="direction">
          <el-select v-model="form.direction" placeholder="请选择" class="select">
            <el-option
              v-for="item in form.fangxiang"
              :key="item"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="题型:" prop="questionType">
          <el-radio-group v-model="form.questionType">
            <el-radio :label="'1'">单选</el-radio>
            <el-radio :label="'2'">多选</el-radio>
            <el-radio :label="'3'">简答</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="难度:" prop="difficulty">
          <el-radio-group v-model="form.difficulty">
            <el-radio :label="'1'">简单</el-radio>
            <el-radio :label="'2'">一般</el-radio>
            <el-radio :label="'3'">困难</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="题干:" prop="question">
          <quill-editor
            ref="text"
            v-model="form.question"
            class="myQuillEditor"
            :options="editorOption"
          />
        </el-form-item>

        <!-- 选项 -->
        <el-form-item v-if="form.questionType !== '3'" label="选项:">
          <el-row v-for="(item, index) in form.options" :key="index">
            <el-col :span="24">
              <div class="xuanxiang">

                  <el-checkbox  v-model="item.isRight" :label="1" v-if="form.questionType==='2'" style="margin-right:0">{{item.code}}:
                  </el-checkbox>

                  <el-radio @change="danxuan(index)" :label="1" v-model="item.isRight" v-if="form.questionType=='1'" style="margin-right:0">{{item.code}}:
                  </el-radio>

                  <el-input v-model="item.title" style="width:26%"></el-input>

          <!--上传-->
              <el-upload
                class="avatar-uploader upload-demo"
                :action="item.img"
                :show-file-list="false"
                :on-success="handlePictureSuccess"
                :before-upload="beforePictureUpload"
              >
                <img v-if="item.img" :src="item.img" class="avatar" />
                <i v-else >上传图片</i>
                <i class="el-icon-circle-close avatar-uploader-icon icon"></i>
              </el-upload>
              </div>
            </el-col>
          </el-row>

          <!-- 增加选项按钮 -->
        <el-button
          type="danger"
          style="margin-top: 10px"
          ref="addBtn"
          :disabled="form.questionType !== '2'"
          @click="addOption"
        >+增加选项与答案</el-button>
        </el-form-item>
        <!-- /选项 -->

        <el-form-item label="解析视频:" prop='videoURL'>
          <el-input v-model="form.videoURL"  style="width:40%"/>
        </el-form-item>

        <el-form-item label="答案解析:" prop="answer">
          <quill-editor
            ref="text"
            v-model="form.answer"
            class="myQuillEditor"
           :options="editorOption"
          />
        </el-form-item>

        <el-form-item label="习题备注:">
          <textarea id="beizhu" v-model="form.remarks"></textarea>
        </el-form-item>

        <el-form-item label="试题标签:">
          <el-select
            v-model="form.tags"
            multiple
            placeholder="请选择"
            class="select"
          >
            <el-option
              v-for="(item, index) in tagslist"
              :key="index"
              :label="item.label"
              :value="item"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="试题标签:">
          <el-select v-model="form.bq" placeholder="请选择">
            <el-option v-for="(item,id) in form.tagslist" :key="id" :label="item.tagName" :value="item.id"></el-option>
          </el-select>
        </el-form-item> -->

        <el-form-item>
        <el-button type="success" @click="submitForm('form')" v-if="$route.query.id">确认修改</el-button>
        <el-button v-else type="primary" @click="submitForm('form')">确认提交</el-button>
      </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { quillEditor } from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { list } from '@/api/hmmm/subjects.js'
import { provinces, citys } from '@/api/hmmm/citys.js'
import { simple } from '@/api/hmmm/directorys.js'
import { list as qylist } from '@/api/hmmm/companys.js'
import { direction } from '@/api/hmmm/constants.js'
import { simple as bqlist } from '@/api/hmmm/tags.js'
import { add, update, detail } from '@/api/hmmm/questions'
export default {
  data () {
    return {
      form: {
        subjectID: '',
        catalogID: '', // 目录
        enterpriseID: '',
        direction: '',
        question: '', // 题干
        answer: '', // 答案解析
        province: '',
        city: '',
        fangxiang: [], // 方向
        difficulty: '1', // 难度
        questionType: '1', // 题型
        videoURL: '', // 视频解析
        remarks: '', // 试题备注
        tags: '', // 试题标签
        options: [
          // 选项 array
          { code: 'A', title: '', img: '', isRight: 0 },
          { code: 'B', title: '', img: '', isRight: 0 },
          { code: 'C', title: '', img: '', isRight: 0 },
          { code: 'D', title: '', img: '', isRight: 0 }
        ]
      },

      addoption: [
        { code: 'E', title: '', img: '', isRight: 0 },
        { code: 'F', title: '', img: '', isRight: 0 },
        { code: 'G', title: '', img: '', isRight: 0 },
        { code: 'H', title: '', img: '', isRight: 0 },
        { code: 'I', title: '', img: '', isRight: 0 },
        { code: 'J', title: '', img: '', isRight: 0 },
        { code: 'K', title: '', img: '', isRight: 0 },
        { code: '啥题啊哪有那么多选项', title: '', img: '', isRight: 0 }
      ],
      editID: null,
      subject: [], // 科目
      mulu: [], // 目录
      qiye: [], // 企业
      provinces: [], // 省会
      citys: [], // 地方城市
      tagslist: [], // 标签
      editorOption: {
        placeholder: '请在这里输入',
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'], // 加粗，斜体，下划线，删除线
            ['blockquote', 'code-block'], // 引用，代码块
            [{ list: 'ordered' }, { list: 'bullet' }], // 列表
            ['image', 'link'] // 上传图片、上传视频
          ]
        }
      },
      // 表单验证规则
      rules: {
        subjectID: [
          { required: true, message: '学科不能为空', trigger: 'change' }
        ],
        catalogID: [
          { required: true, message: '目录不能为空', trigger: 'change' }
        ],
        enterpriseID: [
          { required: true, message: '企业不能为空', trigger: 'change' }
        ],
        province: [
          { required: true, message: '省会不能为空', trigger: 'change' }
        ],
        direction: [
          { required: true, message: '方向不能为空', trigger: 'change' }
        ],
        questionType: [
          { required: true, message: '题型不能为空', trigger: 'change' }
        ],
        difficulty: [
          { required: true, message: '难度不能为空', trigger: 'change' }
        ],
        question: [
          { required: true, message: '题干不能为空', trigger: 'change' }
        ],
        answer: [
          { required: true, message: '答案解析不能为空', trigger: 'change' }
        ],
        videoURL: [
          { required: true, message: '视频解析不能为空', trigger: 'change' }
        ]
      }
    }
  },
  components: {
    quillEditor
  },
  mounted () {
    // this.getMenuList()
  },
  created () {
    this.getCityData()
    this.getSubject()
    this.getQiyeList()
    this.getDirection()
    this.reBackQuestion()
    // this.getDifficulty()
    // this.getQuestionType()
  },
  methods: {
    // 获取学科列表
    async getSubject () {
      const { data } = await list()
      this.subject = data.items
      // console.log(this.form.subject)
    },
    // 获取目录列表
    async getMenuList () {
      const { data } = await simple({ subjectID: this.form.subjectID })
      this.mulu = data
      // console.log(data)
    },
    // 获取企业列表
    async getQiyeList () {
      const { data } = await qylist()
      this.qiye = data.items
      // console.log(this.form.qiye)
    },
    // 获取省
    async getCityData () {
      this.provinces = await provinces()
      // console.log(this.provinces)
    },

    // 获取地方城市数据列表
    async handleProvince () {
      // 根据省会获取地方城市列表
      const data = await citys(this.form.province)
      // console.log(res4);
      this.citys = data
    },
    // 方向
    getDirection () {
      this.form.fangxiang = direction
      // console.log(this.form.fangxiang)
    },
    // // 难度
    // getDifficulty () {
    //   this.form.difficulty = difficulty
    //   // console.log(this.form.difficulty)
    // },
    // 题型
    // getQuestionType () {
    //   this.form.questionType = questionType
    //   // console.log(this.form.questionType)
    // },
    // 标签
    async getTagsList () {
      const data = await bqlist({
        subjectID: this.form.subjectID
      })
      console.log(data.data)
      this.tagslist = data.data
      console.log(this.tagslist)
    },
    // 实现单选
    danxuan (I) {
      this.form.options.forEach((item, index) => {
        item.isRight = 0
        if (index === I) {
          item.isRight = 1
        }
      })
    },
    // 上传
    handlePictureSuccess () {

    },
    beforePictureUpload () {

    },
    // 增加选项
    addOption () {
      if (this.addoption.length !== 0) {
        this.form.options.push(this.addoption[0])
        this.addoption.splice(0, 1)
      }
    },
    // 提交
    submitForm (form) {
      // this.form.tags = this.form.tags[0].label
      // console.log(this.form)
      this.$refs[form].validate(async (valid) => {
        if (valid) {
          if (!this.$route.query.id) {
            try {
              this.form.tags = this.form.tags.join()
              await add(this.form)
              // console.log(res);
              // 提示+跳转
              this.$message.success('录入成功')
            } catch {
              this.$message.warning('录入失败')
              return false
            }
          } else {
            try {
              const res = await update(this.form)
              console.log(res)
              this.$message.success('修改成功')
            } catch {
              this.$message.warning('修改失败')
              return false
            }
          }
          this.$router.push({
            path: '/questions/list'
          })
          // 表单清空
          this.$refs[form].resetFields()
        } else {
          // 否则提示
          this.$message.warning('有没填写的哦!!')
          return false
        }
      })
    },
    // 数据回填
    async reBackQuestion () {
      const id = this.$route.query.id
      // 判断是不是从基础题库过来的,
      if (id) {
        const res = await detail({ id })
        this.form = res.data
      }
      // console.log(res);
    }

  },
  destroyed () {
    console.log('destroyed')
  }
}
</script>

<style scoped lang='less'>
.el-card {
  height: 100%;
  margin: 20px;
}
.myQuillEditor {
  width: 70%;
}
.el-form {
  background-color: #fff;
}
#beizhu {
  // resize:none;
  min-width: 320px;
  min-height: 80px;
}

/deep/.ql-editor {
  min-height: 100px;
  width: 300px;
}

.select {
  width: 50%;
}
.citywd {
  width: 25%;
}

.avatar-uploader {
  position: absolute;
  display: inline-block;
  top:2px;
  width: 80px;
  height: 33px;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  margin-left: 10px;
  /deep/.el-upload {
    border-radius: 6px;
    width: 78px;
    height: 48px;
    cursor: pointer;
    overflow: hidden;
    .icon {
      position: absolute;
      top: -24px;
      right: -9px;
      font-size: 18px;
      z-index: 2;
    }
  }
  /deep/.el-icon-plus::before {
    position: relative;
    left: -4px;
  }
}
.el-row{
  margin:20px
}

</style>
